<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>教导读书会</title>
    <link rel="stylesheet" href="/css/style.css">
    <script src="/js/js.js"></script>
    <style>
        .download-btn-box {
            padding-top: 11.8rem;
        }
        .download-btn{
            display: block;
            border-radius: .5rem;
            font-size: 1.6rem;
            color: #fff;
            width: 65.6%;
            height:5rem;
            line-height: 5rem;
            margin: 0 auto;
            margin-bottom: 2.1rem;
            text-align: center;
        }

        .andro{
            background-color: #3cb035;

        }
        .ios{
            background: #3c3c3c;
        }

        .download-icon{
            display: inline-block;
            vertical-align: -.6rem;
            width: 2.6rem;
            height: 2.6rem;
            background-size: 100%;

        }
        .download-icon.andro{
            background: url("/images/android.png") center center no-repeat;
            background-size: 100%;
        }
        .download-icon.ios{
            background: url("/images/ios.png") center center no-repeat;
            background-size: 100%;
        }

        .open-by-bowser{
            text-align: center;
            color: #fff;
            padding: 10px 0;
            font-size: 2rem;
        }
        .to-where{
            padding: 1.5rem 1rem 0 0;
        }
    </style>
</head>
<body>
<div class="head-download">
    <img src="/download/downloadhead.png" alt="">
</div>
<div class=" wrap">
    <div class="download-btn-box">
        <a class="download-btn andro" id="downloadAndro" href="{{$apkUrl}}">
            <i class="download-icon andro"></i>
            Android版下载
        </a>
        <a class="download-btn ios" href="https://itunes.apple.com/cn/app/id1187561609?mt=8" id="downloadIOS">
            <i class="download-icon ios"></i>
            IOS版下载
        </a>
    </div>

</div>

<div id="mask" class="mask">
    <p class="to-where clearfix">
        <img style="float: right;" src="/images/hear.png" alt="">
    </p>

    <p class="open-by-bowser">
        <span id="openBy">请在浏览器中打开</span>
    </p>
</div>
<script>
    window.onload = function(){
        var mask = document.getElementById("mask");
        var fromWx = isWeiXin(),
            isIOS = isIos(),
            isAndroid = !isIOS;
        if(isIOS){
            document.getElementById("openBy").innerHTML="请在Safari浏览器中打开";
        }
        if(fromWx){
            mask.style.display = "block";
            document.getElementById("downloadAndro").onclick = document.getElementById("downloadIOS").onclick = function(e){
                var ev = e || event;
                mask.style.display = "block";
                if( ev && ev.preventDefault ){
                    ev.preventDefault();
                }else{
                    return false;
                }
            }

            mask.onclick = function(){
                this.style.display = "none";
            }
        }



    }
    function isWeiXin(){
        var ua = window.navigator.userAgent.toLowerCase();
        if(ua.match(/MicroMessenger/i) == 'micromessenger'){
            return true;
        }else{
            return false;
        }
    }

    function isIos(){
        var ua = navigator.userAgent.toLowerCase();
        if (/iphone|ipad|ipod/.test(ua)) {
            return true;
        } else if (/android/.test(ua)) {
            return false;
        }
    }
</script>
</body>
</html>